<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="/WEB-INF/tld/importTag.tld" prefix="importTag"%>
<%@ taglib uri="http://www.yaodian100.com/jsp/yaodian100" prefix="yaodian100" %>
<%@taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt-rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> 
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<c-rt:set var="frontContentPath" value='<%=ServerValue.getFrontHostname()+ServerValue.getFrontContextPath()%>'/>
<c-rt:set var="frontContentHtmlPath" value='<%=ServerValue.getFrontContentHtmlPath()%>'/>

<script language="javascript">
	$().ready(function(){
		//default this menu is selected
		initCategory();

		//初始化排序條件
		init();
	});
	//改变排序条件
	function sortByMethod(sortByField){
		$("#sortBy").val(sortByField);
		if ( "shelfPrice" == sortByField ){
			if ( $("#orderByPrice").val() == "" || $("#orderByPrice").val() == "desc" ){
				$("#orderBy").val("asc");
				$("#orderByPrice").val("asc");
			}else if ( $("#orderByPrice").val() == "asc" ){
				$("#orderBy").val("desc");
				$("#orderByPrice").val("desc");
			}
		}
		if ( "startDate" == sortByField ){
			if ( $("#orderByDate").val() == "" || $("#orderByDate").val() == "desc" ){
				$("#orderBy").val("asc");
				$("#orderByDate").val("asc");
			}else if ( $("#orderByDate").val() == "asc" ){
				$("#orderBy").val("desc");
				$("#orderByDate").val("desc");
			}
		}
		$("#categoryForm").submit();
		return false;
	}

	//初始化排序條件
	function init(){
		if ( $("#sortBy").val() == "shelfPrice" ){
			if ( $("#orderByPrice").val() == "desc" )
				$("#shelfPrice").attr("class","filterbtn-2-down-f");
			else if ( $("#orderByPrice").val() == "asc" )
				$("#shelfPrice").attr("class","filterbtn-2-up-f");
			
			if ( $("#orderByDate").val() == "desc" )
				$("#startDate").attr("class","filterbtn-4-down");
			else if ( $("#orderByDate").val() == "asc" )
				$("#startDate").attr("class","filterbtn-4-up");
		}

		if ( $("#sortBy").val() == "startDate" ){
			if ( $("#orderByDate").val() == "desc" )
				$("#startDate").attr("class","filterbtn-4-down-f");
			else if ( $("#orderByDate").val() == "asc" )
				$("#startDate").attr("class","filterbtn-4-up-f");
			
			if ( $("#orderByPrice").val() == "desc" )
				$("#shelfPrice").attr("class","filterbtn-2-down");
			else if ( $("#orderByPrice").val() == "asc" )
				$("#shelfPrice").attr("class","filterbtn-2-up");
		}
	}	
</script>
<jsp:include page="/common/collection.jsp"/>
<div class="tocollect">
	<a href="#" id="addCategoriesList_${category.id}" class="icon-collection">收藏此分类</a>
</div>
<div class="sidebar">
	<!-- menu start -->
	<importTag:static path="${frontContentHtmlPath}${category.id}/SIDEBAR.html"/>
	<!-- menu end -->
	<div class="ad-sky">
		<script type="text/javascript">
			GA_googleFillSlot("yd100_${tempZId}_sidebar_right_image_01");
		</script>
	</div>
  <div class="lt-bn-end">
  	<script type="text/javascript">
			GA_googleFillSlot("yd100_${tempZId}_sidebar_right_image_02");
			GA_googleFillSlot("yd100_${tempZId}_sidebar_right_image_03");
		</script>
  </div>  	
</div>
<!-- content start -->
<div class="content">	
	<!-- recommend start -->
	<importTag:static path="${frontContentHtmlPath}${category.id}/RECOMMEND.html"/>
	<!-- content end -->	
	<!-- 過濾bar -->
  <div class="filterbar">
  	<div class="f-lt">
  		<span>排序</span>
  		<a class="filterbtn-2-up" id="shelfPrice" href="javascript:void(0);" onclick="sortByMethod('shelfPrice');return false;">价格</a>
  		<a class="filterbtn-4-down" id="startDate" href="javascript:void(0);" onclick="sortByMethod('startDate');return false;">上架时间</a>
  	</div>
	  <p align="right">共${pager.totalSize}笔： ${pager.currentPage+1}/${pager.pageSize} 
	  	<c-rt:set var="urlpath" value="category.do?z=${category.id}&sortBy=${sortBy}&orderByPrice=${orderByPrice}&orderByDate=${orderByDate}&pager.currentPage="/>
	  	<c-rt:choose>
	  		<c-rt:when test="${pager.currentPage==0}">上一页 |</c-rt:when>
	  		<c-rt:otherwise>
	  			<a href="${urlpath}${pager.currentPage-1}" class="a-togo">上一页</a> |
	  		</c-rt:otherwise> 
	  	</c-rt:choose>
	  	<c-rt:choose>
	  		<c-rt:when test="${pager.currentPage == pager.pageSize-1 }">下一页	</c-rt:when>
	  		<c-rt:otherwise>
	  			<a href="${urlpath}${pager.currentPage+1}" class="a-togo">下一页</a>
	  		</c-rt:otherwise>
	  	</c-rt:choose>
	  </p>
  </div>
  <!-- 過濾bar -->
  <!-- 圖片結果展示區 -->
	<div class="pdlist-img">
		<c-rt:forEach items="${viewShelfProducts}" var="viewShelfProduct">
			<c-rt:set var="pId" value="${viewShelfProduct.productId}"/>		
	  	<div class="pdnmpinnerboxbg">
		   	<a href="${frontContentPath}/product/product.do?productId=${pId}&z=${viewShelfProduct.categoryId}" target="_blank"><img src="/PImg/${fn:substring(pId,0,4)}/${pId}/${pId}_m135.jpg" onError="this.src='/PImg/blank_135.gif'" alt="${viewShelfProduct.productName }" width="135" height="135" /></a>
	  	  <em>${viewShelfProduct.promoteName}</em>
	      <h6>
		      <a href="${frontContentPath}/product/product.do?productId=${pId}&z=${viewShelfProduct.categoryId}" target="_blank">
		      ${viewShelfProduct.productName}
		      </a>
	      </h6>
	      <p>
	      	<i>会员价：</i><br />
	      	<a class="icon-collection" href="javascript:;" id="addWishList_${pId}_${viewShelfProduct.shelfPrice}" title="加入收藏">收藏</a>
	      	<strong>￥<fmt-rt:formatNumber value="${viewShelfProduct.shelfPrice}" pattern="#####0.00" /></strong>
	      </p>
	    </div>
    </c-rt:forEach>
	</div>
	<s:form action="category.do" method="post" id="categoryForm">
		<input type="hidden" id="sortBy" name="sortBy" value="${sortBy}"/>
		<input type="hidden" id="orderBy" name="orderBy" value="${orderBy}"/>
		<input type="hidden" id="orderByPrice" name="orderByPrice" value="${orderByPrice}"/>
		<input type="hidden" id="orderByDate" name="orderByDate" value="${orderByDate}"/>
		<input type="hidden" name="z" value="${category.id}"/>
	</s:form>
	<p class="cf" align="center">
	<yaodian100:pager10 link="category.do?z=${category.id}&sortBy=${sortBy}&orderByPrice=${orderByPrice}&orderByDate=${orderByDate}" pagerObj="${pager}" />
	</p>
</div>	